<template>
    <div class="flex flex-col h-screen text-sm">
        <div class=" shrink-0">
            <Topbar class=" bg-gradient-to-tr from-red-400/90 to-orange-300/90" search-placeholder="搜索我的订单">
                <template #left>
                    <Back class="!bg-white/0 text-white" />
                </template>
            </Topbar>
            <Tabs full active-el-position="br" class="!bg-gray-100">
                <TabItem v-for="(item, index) in orderType" :title="item.name" />
            </Tabs>
        </div>
        <div class="overflow-hidden text-gray-700 bg-gray-100 grow">
            <UpPullLoad @trigger="loadMore">
                <div class="py-2 space-y-2">
                    <div class="p-3 bg-white rounded-sm" v-for="(item, index) in 4">
                        <div class="flex items-center justify-between">
                            <div class="">店铺名称》</div>
                            <div class="flex items-center text-xs text-gray-500" :class="{
                                'rounded-full bg-red-200 text-red-500 overflow-hidden': index == 0
                            }">
                                <div :class="{ 'bg-red-500 rounded-br-lg px-2 text-white': index == 0 }">
                                    {{ orderType[index + 1].name }}
                                </div>
                                <div v-if="index == 0" class="flex items-center pr-2 ml-2">
                                    {{ current.hours }} 小时
                                    {{ current.minutes }} 分
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center mt-2">
                            <div class="w-20 h-20 p-1 overflow-hidden rounded-md bg-gray-50 shrink-0">
                                <LazyImage :src="g" />
                            </div>
                            <div class="mx-4 grow line-clamp-2">水玻璃杯水玻璃杯水玻璃杯水玻璃杯水玻璃杯水玻璃杯水玻璃杯水玻璃杯水玻璃杯水玻璃杯</div>
                            <div class="text-xs shrink-0">
                                <div><span class="">¥</span> <span class="text-sm">399</span> </div>
                                <div class="text-gray-500">共 1 件</div>
                            </div>
                        </div>
                        <OrderAction :status="'unpaid'" />
                    </div>
                </div>
            </UpPullLoad>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import g from '~/assets/shop/goods/g1.png'
import { useCountDown } from '~/utils';
import OrderAction from './components/orderAction.vue';
const { current, start } = useCountDown({ time: 1000 * 60 * 60 * 2 })
start()
const orderType = [
    { name: '全部', code: 'all' },
    { name: '待付款', code: 'unpaid' },
    { name: '待发货', code: 'unshipped' },
    { name: '待收货', code: 'unreceived' },
    { name: '评价', code: 'comment' },
    { name: '售后', code: 'after-sale' },
]
const orders = ref(new Array(7).fill({ status: 'unpaid' }));

const loadMore = ({ done }: any) => {
    setTimeout(() => {
        orders.value.push(...[
            { status: 'unpaid' }, { status: 'unpaid' }, { status: 'unpaid' }
        ]);
        done()
    }, 200);
}
</script>
    
<style></style>